import DocCardBox from "@/components/doc-card"
import React from "react"
import { Demo, demoJson, columns, data } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "default",
        hash: "tbe-l-demo1",
        coms: [<Demo key={0} data={data} columns={columns} />],
        comsJson: [demoJson("data={data} columns={columns}")],
        desc: [{ text: "tbe_1_1_1" }]
    },
    {
        titleKey: "tbe_title_1",
        hash: "tbe-l-demo2",
        coms: [<Demo key={0} data={data} bordered columns={columns} />],
        comsJson: [demoJson("data={data} bordered columns={columns}")],
        desc: [{ text: "tbe_2_1_1" }]
    },
    {
        titleKey: "tbe_title_4",
        hash: "tbe-l-demo2",
        coms: [<Demo key={0} data={data} bordered="y" columns={columns} getRowCls={(i: number) => (i % 2 === 0 ? "bg-desc" : "bg-split")} />],
        comsJson: [demoJson("data={data} bordered='y' columns={columns} getRowCls={(i: number) => (i % 2 === 0 ? 'bg-desc' : 'bg-split')}")],
        desc: [{ text: "tbe_5_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "tbe_title_2",
        hash: "tbe-r-demo1",
        coms: [<Demo key={0} data={data} bordered="x" columns={columns} />],
        comsJson: [demoJson("data={data} bordered='x' columns={columns}")],
        desc: [{ text: "tbe_3_1_1" }]
    },
    {
        titleKey: "tbe_title_3",
        hash: "tbe-r-demo2",
        coms: [<Demo key={0} bordered="y" data={data} columns={columns} />],
        comsJson: [demoJson("bordered='y' data={data} columns={columns}")],
        desc: [{ text: "tbe_4_1_1" }]
    }
]

function TableDoc() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "TableProps",
            data: [
                {
                    schema: "columns",
                    type: "ColumnProps[]",
                    defaultValue: "-",
                    isRequire: t("yes"),
                    desc: t("desc_tbe_1")
                },
                {
                    schema: "data",
                    type: "any[]",
                    defaultValue: "-",
                    isRequire: t("yes"),
                    desc: t("desc_tbe_2")
                },
                {
                    schema: "footerColumns",
                    type: "ColumnProps[]",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_tbe_3")
                },
                {
                    schema: "bordered",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_tbe_4")
                },
                {
                    schema: "showHeader",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_tbe_5")
                },
                {
                    schema: "showFooter",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_tbe_6")
                },
                {
                    schema: "onTrClick",
                    type: "Function",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_tbe_7")
                },
                {
                    schema: "empty",
                    type: "ReactElement",
                    defaultValue: "空",
                    isRequire: t("no"),
                    desc: t("desc_tbe_8")
                },
                {
                    schema: "footer",
                    type: "ReactElement",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_tbe_9")
                },
                {
                    schema: "getRowCls",
                    type: "(_i?: number, _info?: Obj) => string",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_tbe_10")
                },
                {
                    schema: "classNames",
                    type: "TableClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_tbe_11")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Table" desc="tableDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default TableDoc
